<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <wx-tables
    :columns="columns"
    title="账号分配"
    :data-source="dataSource"
    :loading="loading"
    :total="total"
    :size.sync="size"
    :page.sync="page"
    @handlePage="handlePage"
  >
    <!--      <template #search>-->
    <!--        &lt;!&ndash;        <tip-block tip="搜索" />&ndash;&gt;-->
    <!--        <el-form label-position="left" style="margin-top: 10px;display: flex;flex-wrap:wrap;justify-content: space-between">-->
    <!--          <el-form-item style="display: flex;" label="学生姓名" prop="search_code">-->
    <!--            <el-input v-model="searchForm.search_words" clearable placeholder="请输入" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item style="display: flex;" label="请假单状态" prop="search_code">-->
    <!--            <el-select v-model="searchForm.leave_status_str" clearable placeholder="请选择">-->
    <!--              <el-option-->
    <!--                v-for="(item, type) of LEAVE_STATUS_LIST"-->
    <!--                :key="type"-->
    <!--                :label="item.title"-->
    <!--                :value="item.value"-->
    <!--              />-->
    <!--            </el-select>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item style="display: flex;" label="所在学部" prop="search_code">-->
    <!--            <el-select v-model="searchForm.year_department_id" clearable placeholder="请选择学部">-->
    <!--              <el-option-->
    <!--                v-for="item in select_dept"-->
    <!--                :key="item.type"-->
    <!--                :label="item.label"-->
    <!--                :value="item.type"-->
    <!--              />-->
    <!--            </el-select>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item style="display: flex;" label="所在年级" prop="search_code">-->
    <!--            <el-select v-model="searchForm.search_grade_name" clearable placeholder="请选择年级">-->
    <!--              <el-option-->
    <!--                v-for="item of 20"-->
    <!--                :key="item"-->
    <!--                :label="item"-->
    <!--                :value="item"-->
    <!--              />-->
    <!--            </el-select>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item style="display: flex;" label="所在班级" prop="search_code">-->
    <!--            <el-select v-model="searchForm.search_class_name" clearable placeholder="请选择班级">-->
    <!--              <el-option-->
    <!--                v-for="item of 20"-->
    <!--                :key="item"-->
    <!--                :label="item"-->
    <!--                :value="item"-->
    <!--              />-->
    <!--            </el-select>-->
    <!--          </el-form-item>-->
    <!--          <div>-->
    <!--            <el-button type="primary" class="table-btn" icon="el-icon-search" @click="handleSearchClick">筛选</el-button>-->
    <!--            <el-button class="table-btn" icon="el-icon-refresh" @click="handleRectSearch">重置</el-button>-->
    <!--          </div>-->
    <!--        </el-form>-->
    <!--      </template>-->

    <!-- tools -->
    <template #tools>
      <el-button type="primary" class="table-btn" @click="handleOpenForm()">添加账号</el-button>
      <!--      <el-button class="table-btn" icon="el-icon-refresh-right" @click="handleGetTable">刷新</el-button>-->
    </template>
    <template v-slot:admin_name="record">
      <span>{{ record.row.admin_tenant ? record.row.admin_tenant.name : '-' }}</span>
    </template>
    <template v-slot:admin_phone="record">
      <span>{{ record.row.admin_tenant ? record.row.admin_tenant.phone : '-' }}</span>
    </template>
    <template v-slot:status="record">
      <el-switch
        v-model="record.row.status"
        :active-value="1"
        :inactive-value="0"
        active-color="#409EFF"
        inactive-color="#C0CCDA"
        @change="handleSetStatus(record.row)">
      </el-switch>
    </template>
    <template v-slot:oper="record">
      <div class="oper-box">
        <span><el-link type="primary" @click="handleEit(record.row)">编辑</el-link></span>
        <span><el-link type="primary" @click="handleChangePassWord(record.row.admin_tenant)">重置密码</el-link></span>
        <span><el-link type="danger" @click="handleDialog(record.row.admin_tenant.id)">删除</el-link></span>
      </div>
    </template>
    <wx-dialog
      ref="wx-dialog"
      title="删除"
      :visible.sync="pwdDialog"
      width="500px"
      @ok="handleDelete(delete_id)"
    >
      <div>
        确认需要删除该账号吗？若删除会把此三级所有的子管理员、景区、商户信息全都删除
      </div>
    </wx-dialog>
    <wx-dialog
      ref="wx-dialog"
      :visible.sync="formVisible"
      :is-add="isAdd"
      width="500px"
      @ok="handleSaveForm"
    >
      <div class="wx-dialog-form">
        <el-form ref="ruleForm" v-loading="formLoading" :rules="ruleForm" :model="formInfo" label-position="left" label-width="90px">
          <el-form-item label="账号类型" prop="type">
            <el-select v-model="formInfo.type" clearable placeholder="请选择账号区域">
              <el-option
                v-for="(item, type) of ACCOUNT_TYPE"
                :key="type"
                :label="item"
                :value="Number(type)"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="管理员" prop="admin_tenant_name">
            <el-input v-model="formInfo.admin_tenant_name" style="width: 200px;" placeholder="请输入管理员名称" />
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="formInfo.phone" style="width: 200px;" placeholder="请输入" />
            <div>联系电话即账号,默认密码:meizhen@123</div>
          </el-form-item>
        </el-form>
      </div>
    </wx-dialog>
  </wx-tables>
</template>

<script>
import { adminPortalResetPassword } from '@/api/login'
import WxDialog from '@/components/WxDialog'
import WxTables from '@/components/WxTables'
import TableMixins from '@/components/WxTables/mixins'
import {
  adminTenantDestroy,
  indexCreateTenant,
  indexEditTenant,
  tenantGetListByCon,
  tenantSetStatus
} from '@/api/township'
import { ACCOUNT_TYPE } from '@/views/constants'

var validPhone = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入电话号码'))
  } else if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(value)) {
    callback(new Error('请输入正确的11位手机号码'))
  } else {
    callback()
  }
}

export default {
  name: 'Township',
  components: {
    WxDialog,
    WxTables
  },
  mixins: [TableMixins],
  data() {
    return {
      pwdDialog: false,
      delete_id: '',
      columns: [
        { config: { type: 'index', width: 100 }, label: '序号' },
        { dataIndex: 'type_str', label: '账号类型' },
        { dataIndex: 'admin_name', label: '管理员名称', slots: true },
        { dataIndex: 'admin_phone', label: '账号', slots: true },
        { dataIndex: 'created_at', label: '创建时间' },
        { dataIndex: 'status', label: '是否启用', slots: true },
        { dataIndex: 'oper', label: '操作', slots: true }
      ],
      roleList: [],
      markId: '',
      ACCOUNT_TYPE,
      ruleForm: {
        type: [
          { required: true, message: '请选择账号区域', trigger: 'blur' }
        ],
        admin_tenant_name: [
          { required: true, message: '请输入管理员名称', trigger: 'blur' }
        ],
        phone: [
          { required: true, trigger: 'blur', validator: validPhone }
        ]
      },
      formInfo: {}
    }
  },
  watch: {
    pwdDialog(val) {
      if(!val) this.delete_id = ''
    }
  },
  methods: {
    /**
     * 获取列表
     */
    getList() {
      tenantGetListByCon({page: this.page}).then(res => {
        if (this.pagination) {
          const { data, total } = res.data
          this.total = total
          this.dataSource = data
          this.cacheDataSource = JSON.parse(JSON.stringify(data))
        } else {
          this.dataSource = res.data
          this.cacheDataSource = JSON.parse(JSON.stringify(res.data))
        }
        this.handleSetCancelStatus?.()
        // this.handleCompleteTable()
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * 新增/编辑人员
     */
    createManager(idSend) {
      if(Object.keys(idSend).length) {
        indexEditTenant({ ...this.formInfo,...idSend })
          .then((res) => {
            if (res.code === 200) {
              this.$message.success(this.isAdd ? '添加成功' : '编辑成功')
              this.formInfo = {}
              this.formVisible = false
              this.handleGetTable()
            }
          }).finally(() => {
          this.handleResetDialog()
        })
      }else{
        indexCreateTenant({ ...this.formInfo })
          .then((res) => {
            if (res.code === 200) {
              this.$message.success(this.isAdd ? '添加成功' : '编辑成功')
              this.formInfo = {}
              this.formVisible = false
              this.handleGetTable()
            }
          }).finally(() => {
          this.handleResetDialog()
        })
      }
    },
    /**
     * 更改人员状态
     */
    changeStatus(id,status) {
      tenantSetStatus({
        tenant_id: id,
        status
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.handleGetTable()
        }
      })
    },
    /**
     * 重置人员密码
     * @param id
     */
    handleChangePassWord(admin_town) {
      adminPortalResetPassword({ id:admin_town.id,type:3 }).then((res) => { if (res.code === 200) { this.$message.success(res.msg) } })
    },
    /**
     * 编辑
     * @param item
     */
    handleEit(item) {
      const { id, type, admin_tenant } = item
      const admin_tenant_name = admin_tenant ? admin_tenant.name : ''
      const phone = admin_tenant ? admin_tenant.phone : ''
      this.markId = 'tenant_id'
      this.handleOpenForm(id,['type','admin_tenant_name','phone'],{type,admin_tenant_name,phone})
    },
    /**
     * 删除管理员
     * @param admin_ids
     */
    handleDelete(admin_tenant_ids) {
      adminTenantDestroy({ admin_tenant_ids }).then((res) => { if (res.code === 200) {
        this.$message.success(res.msg)
        this.pwdDialog = false
        this.handleGetTable()
      } })
    },
    /**
     * 打开弹窗
     * @param id
     */
    handleDialog(id) {
      this.delete_id = id
      this.pwdDialog = true
    },
    /**
     * 翻页
     * @param val
     */
    handlePage(val) {
      this.page = val
    }
  }
}
</script>
<style lang="scss" src="./style/index.scss" scoped/>
